<template>
  <div>
    <!-- 首页轮播图 -->
  <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="/image/bjt.jpg" alt="" style="width:100%;"></van-swipe-item>
  <van-swipe-item><img src="/image/bjt.jpg" alt="" style="width:100%;"></van-swipe-item>
  <van-swipe-item><img src="/image/bjt.jpg" alt="" style="width:100%;"></van-swipe-item>
</van-swipe> -->
<!-- 2 -->
   <!-- <swiper class="swiper" :options="swiperOption">
    <swiper-slide><img src="/image/001.jpg" alt="" ></swiper-slide>
    <swiper-slide><img src="/image/002.jpg" alt="" ></swiper-slide>
    <swiper-slide><img src="/image/003.png" alt="" ></swiper-slide>
    <swiper-slide><img src="/image/001.jpg" alt="" ></swiper-slide>
    <swiper-slide><img src="/image/002.jpg" alt="" ></swiper-slide>
    <swiper-slide><img src="/image/003.png" alt="" ></swiper-slide>
    <swiper-slide><img src="/image/001.jpg" alt="" ></swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper> -->

  <!-- 第三个轮播图 -->
<div class="example-3d">
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>
  </div>
</template>

<script>
// import Swiper from 'swiper'
// 第二个轮播图
//  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
//   import 'swiper/css/swiper.css'
// 第三个轮播图
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  export default {

  //  name: 'swiper-example-multiple-slides-per-biew',
  //   title: 'Multiple slides per view',
  //   components: {
  //     Swiper,
  //     SwiperSlide
  //   },
  //   data() {
  //     return {
  //       swiperOption: {
  //         slidesPerView: 3,
  //         spaceBetween: 30,
  //         pagination: {
  //           el: '.swiper-pagination',
  //           clickable: true
  //         }
  //       }
  //     }
  //   }

  // 第三个轮播图
  name: 'swiper-example-3d-coverflow',
    title: '3D Coverflow effect',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows : true
          },
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    }
}
</script>


<style >
 
  /* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
  } */

img{
  border-radius: 8px;
  width:120px;
}
  
</style>
   
